import {PageContainer} from '@ant-design/pro-components';
import {history, useModel} from '@umijs/max';
import {Button, Card, Col, Input, List, message, Pagination, Row, theme} from 'antd';
import React, {useEffect, useRef, useState} from 'react';
import {listInterfaceInfoByPageUsingGet} from '@/services/api-share-backhend/interfaceInfoController';

const Index: React.FC = () => {
    const {token} = theme.useToken();
    const [data, setData] = useState<API.InterfaceInfo[]>([]);
    const [total, setTotal] = useState<number>(0);
    const [loading, setLoding] = useState<boolean>(false);
    const {initialState} = useModel('@@initialState');

    const loadData = async (current = 1, pageSize = 9, name: string) => {
        try {
            const userId = initialState.loginUser.id
            if (userId == null) {
                message.error("请先登录")
            } else {
                const res = await listInterfaceInfoByPageUsingGet({
                    current: current,
                    pageSize: pageSize,
                    userId: userId,
                    name: name
                });
                setData(res.data?.records ?? []);
                setTotal(res.data?.total ?? 0);
            }

        } catch (e) {
            message.error("服务器异常");
        }
        setLoding(false)
    };

    useEffect(() => {
        setLoding(true)
        loadData();
    }, []);

    return (
        <PageContainer title={"todo 待优化"}>
            <Input.Search
                placeholder="请输入接口名称"
                style={{width: '400px', marginBottom: '20px'}}
                loading={loading}
                enterButton={'确认'}
                onSearch={(value) => loadData(1, 9, value)}
            />
            <br/>
            <List
                grid={{gutter: 16, column: 3}}
                dataSource={data}
                renderItem={(item, index) => {
                    const linkUrl = 'show_interface_detail/' + item.id;
                    return (
                        <List.Item style={{marginBottom: '5px'}}>
                            <Card
                                title={item.name}
                                extra={<text>{item.method}</text>}
                                actions={[
                                    <Button
                                        type="primary"
                                        key="view"
                                        onClick={() => {
                                            history.push(linkUrl);
                                        }}
                                    >
                                        查看
                                    </Button>,
                                ]}
                            >
                                {item.description}{' '}
                            </Card>
                        </List.Item>
                    );
                }}
                pagination={{
                    showTotal: (total) => {
                        return '共 ' + total + '个';
                    },
                    total,
                    pageSize: 9,
                    onChange: (page, pageSize) => {
                        loadData(page, pageSize);
                    },
                }}
            />
        </PageContainer>
    );
};

export default Index;
